@charset "utf-8";
@import "common/reset";
@import "common/common";


body{
    background: url(../img/bodybeijing.png)repeat;
}

.mobile{
    section{
        margin-bottom: p(100);
        .foot{
            width: 100%;
            position: fixed;
            bottom: 0;
            height: p(89);
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: white;
            .left{
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-grow: 1;
                label{
                    width: p(46);
                    height: p(46);
                    border-radius: 50%;
                    display: inline-block;
                    position: relative;
                    img{
                        width: 100%;
                        &:nth-of-type(2){
                            display: none;
                        }
                    }
                }
                span{
                    font-size: p(28);
                    color: #5c5c5c;
                    margin-left: p(20);
                }
            }
            .center{
                text-align: center;
                flex-grow: 8;
                p{
                    span{
                        &:nth-of-type(1){
                            font-size: p(22);
                            color: #6b6b6b;
                        }
                        &:nth-of-type(2){
                            font-size: p(30);
                            color: #e73838;
                        }
                    }
                    &:nth-of-type(2){
                        color: #6b6b6b;
                        font-size: p(20);
                    }
                }
            }
            .right{
                flex-grow: 1;
                button{
                    display: inline-block;
                    font-size: p(26);
                    color: white;
                    width: p(161);
                    height: p(71);
                    line-height: p(71);
                    text-align: center;
                    border-radius: p(7);
                    background-color: #f85c5c;
                }
            }
        }
        ul{
            li{
                width: 100%;
                height: p(182);
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: white;
                border-bottom: p(2) solid #cdcbce;
                .checked{
                    flex-grow: 1;
                    text-align: center;
                    position: relative;
                    label{
                        display: inline-block;
                        width: p(46);
                        height: p(46);
                        border-radius: 50%;
                        img{
                            width: 100%;
                            &:nth-of-type(2){
                                display: none;
                            }
                        }
                    }
                }
                .img{
                    flex-grow: 1;
                    width: p(120);
                    height: p(125);
                    text-align: center;
                    label{
                        display: inline-block;
                        width: p(120);
                        height: p(125);
                        overflow: hidden;
                        position: relative;
                        img{
                            width: 100%;
                        }
                    }
                }
                .jiage{
                    flex-grow: 1;
                    font-size: p(12);
                    a{
                        color: #5c5c5c;
                    }
                    p{
                        color: #eb7575;
                        margin-left: p(12);
                    }
                    input{
                        width: p(127);
                        height: p(38);
                        border: p(2) solid #6b6b6b;
                        margin-left: p(12);
                        padding-left: p(10);
                    }
                }
                .del{
                    flex-grow: 1;
                    text-align: center;
                    font-size: p(20);
                    color: #EB7575;
                    p{
                        width: p(50);
                        height: p(50);
                        border-radius: 50%;
                        display: block;
                        label{
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        input[type="checkbox"]{
            display: none;
        }
        #check1:checked ~ label,
        #check2:checked ~ label,
        #check3:checked ~ label{
            img{
                &:nth-of-type(1){
                    display: none;
                }
                &:nth-of-type(2){
                    display: block;
                }
            }
        }
        #checkAll:checked ~ ul{
            li{
                .checked{
                    label{
                        img{
                            &:nth-of-type(1){
                                display: none;
                            }
                            &:nth-of-type(2){
                                display: block;
                            }
                        }
                    }
                }
            }
        }
        #checkAll:checked ~.foot{
            .left{
                label{
                    img{
                        &:nth-of-type(1){
                            display: none;
                        }
                        &:nth-of-type(2){
                            display: block;
                        }
                    }
                }
            }
        }
        #del1:checked~li{
            &:nth-of-type(1){
                height: 0;
                overflow: hidden;
            }
        }
        #del2:checked~li{
            &:nth-of-type(2){
                height: 0;
                overflow: hidden;
            }
        }
        #del3:checked~li{
            &:nth-of-type(3){
                height: 0;
                overflow: hidden;
            }
        }
    }
}
